<template>
  <view class="px15px pb15px">
    <view class="mt15px">
      <view class="py10px"><text class="text-black text-18px">票据信息</text></view>
      <van-cell-group>
        <van-field
          value="xxx智慧工地项目"
          label="项目名称"
          disabled
        />
        <van-field
          :value="wlname"
          label="物料名称"
          placeholder="请输入"
        />
        <van-field
          :value="wlname"
          label="规格型号"
          placeholder="请输入"
        />
        <van-field
          :value="wlname"
          label="规格单位"
          placeholder="请输入"
        />
        <van-field
          :value="wlname"
          label="数量"
          placeholder="请输入"
        />
        <van-field
          :value="wlname"
          label="单价(元)"
          placeholder="请输入"
        />
        <van-field
          :value="wlname"
          label="金额(元)"
          placeholder="请输入"
        />
      </van-cell-group>
    </view>
    <view class="mt15px">
      <view class="py10px"><text class="text-black text-18px">票据照片</text></view>
      <Card>
        <view class="pt15px pb10px px10px">
          <van-uploader
            accept="media"
            capture="['picture']"
            :fileList="fileList"
            use-before-read
            @beforeRead="beforeRead"
            @afterRead="afterRead"
          />
        </view>
      </Card>
    </view>

    <view class="mt15px">
      <view class="py10px"><text class="text-black text-18px">备注</text></view>
      <van-cell-group>
        <van-field
          :value="remark"
          placeholder="请输入"
          :border="false"
          type="textarea"
          :autosize="{ minHeight: 100, maxHeight: 100 }"
        />
      </van-cell-group>
    </view>

    <view class="mt15px"><van-button type="info" block>提交</van-button></view>
  </view>
</template>

<script>
import Card from "@/components/card";

export default {
  components: { Card },
  data() {
    return {
      radio: "1",
      remark: "",
      wlname: "",
      fileList: [],
    };
  },
  methods: {
    handleInput(event) {
      this.radio = event.detail;
    },
    beforeRead(event) {
      const { callback } = event.detail;
      callback(true);
    },
    afterRead(event) {
      const { detail } = event;
      this.fileList.push(detail.file);
    }
  },
};
</script>

<style></style>
